<template>
  <div>
    <!-- 组合持仓 -->
    <div class="cp_chi_cang" v-if="showOtherMode">
      <div class="history_table_wrapper" v-if="list.length">
        <div>
          <stock-list
            :list="list"
            stockTag="heavy"
            unit="rem"
            fixed="left"
            :expand="false"
            fixedHead="true"
            @headSort="watchHeadSort"
            @clickRow="watchClickRow"
          >
            <stock-list-item
              prop="stockCode"
              label="股票名称"
              label-width="1.7rem"
              label-align="left"
            >
              <tempalte v-slot="scope">
                <div class="stock_detail_template">
                  <div>{{ scope.stockName }}</div>
                  <div>{{ scope.stockCode }}</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="nowPrice"
              label="现价"
              sortable="true"
              label-width="1.4rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.upDownPercent > 0" class="up_data">
                    {{ scope.nowPrice }}
                  </div>
                  <div v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0" class="zero_data">
                    {{ scope.nowPrice }}
                  </div>
                  <div v-else-if="scope.nowPrice === '' || scope.nowPrice === -9999">--</div>
                  <div v-else class="down_data">
                    {{ scope.nowPrice }}
                  </div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="upDownPercent"
              label="涨幅"
              label-width="1.4rem"
              sortable="false"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.upDownPercent > 0" class="up_data">
                    {{ scope.upDownPercent }}%
                  </div>
                  <div
                    v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                    class="zero_data"
                  >
                    {{ scope.upDownPercent }}%
                  </div>
                  <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
                  <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="rangeProfit"
              label="区间涨幅"
              sortable="true"
              label-width="1.6rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.rangeProfit > 0" class="up_data">{{ scope.rangeProfit }}%</div>
                  <div
                    v-else-if="scope.rangeProfit && Number(scope.rangeProfit) === 0"
                    class="zero_data"
                  >
                    {{ parseFloat(scope.rangeProfit).toFixed(2) }}%
                  </div>
                  <div v-else-if="!scope.rangeProfit || scope.rangeProfit === ''">--</div>
                  <div v-else class="down_data">{{ scope.rangeProfit }}%</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="highestProfit"
              label="最高涨幅"
              sortable="true"
              label-width="1.6rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.highestProfit > 0" class="up_data">
                    {{ scope.highestProfit }}%
                  </div>
                  <div
                    v-else-if="scope.highestProfit && Number(scope.highestProfit) === 0"
                    class="zero_data"
                  >
                    {{ parseFloat(scope.highestProfit).toFixed(2) }}%
                  </div>
                  <div v-else-if="!scope.highestProfit || scope.highestProfit === ''">--</div>
                  <div v-else class="down_data">{{ scope.highestProfit }}%</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="buyDate"
              label="买入时间"
              sortable="true"
              label-width="2.2rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.buyDate">
                    {{ scope.buyDate }}
                  </div>
                  <div v-else>--</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="buyPrice"
              label="买入价格"
              sortable="true"
              label-width="1.6rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.buyPrice">
                    {{ scope.buyPrice }}
                  </div>
                  <div v-else>--</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="sellDate"
              label="卖出时间"
              sortable="true"
              label-width="2.2rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.sellDate">
                    {{ scope.sellDate }}
                  </div>
                  <div v-else>--</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="sellPrice"
              label="卖出价格"
              sortable="true"
              label-width="1.6rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.sellPrice">
                    {{ scope.sellPrice }}
                  </div>
                  <div v-else>--</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="position"
              label="建议仓位"
              sortable="true"
              label-width="1.6rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.position > 0" class="up_data">{{ scope.position }}%</div>
                  <div v-else-if="Number(scope.position) === 0" class="zero_data">
                    {{ scope.position }}
                  </div>
                  <div v-else-if="!scope.position || scope.position === ''">--</div>
                  <div v-else class="down_data">{{ scope.position }}%</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item prop="status" label="状态" label-width="0.9rem" label-align="right">
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.status">
                    {{ scope.status }}
                  </div>
                  <div v-else>--</div>
                </div>
              </tempalte>
            </stock-list-item>
          </stock-list>
        </div>
      </div>
      <div v-else>
        <BlockStatus></BlockStatus>
      </div>
    </div>
    <div v-else>
      <OtherHistory />
    </div>
  </div>
</template>
<script>
import { redgreenhandler, jumpTokline, compare, webHQCommon, apiDataDeal } from '../utils/index';
import { SELECT_STOCKS } from '@/apis';
import config from '../config/index';
import BlockStatus from '../components/common/BlockStatus';
import OtherHistory from '../components/OtherHistory';
export default {
  name: 'history',
  data() {
    return {
      list: [],
      detailTableData: [],
      showOtherMode: true,
    };
  },
  components: {
    BlockStatus,
    OtherHistory,
  },
  watch: {
    detailTableData: {
      handler(newValue) {
        if (newValue) {
          this.list = [];
          newValue.forEach(item => {
            this.list.push(item);
          });
          this.$pageStatus.close();
        }
      },
    },
  },
  mounted() {
    const ggzcId=2;
    const jgccId=10;
    const ybyxId=118;
    const bmltId=108;
    const xfltId=78;
    const newXfltId=178;
    const dtqsId=202;
    const xfjjId=218;
    const bdqzId=220;
    const rdjjId=222;
    const ncId=212;
    if (![ggzcId, xfltId, jgccId, ybyxId, bmltId, newXfltId, dtqsId,xfjjId,bdqzId,rdjjId,ncId].includes(Number(this.$route.query.gpc_id))) {
      this.showOtherMode = false;
      return;
    }
    $(window).scrollTop(0);
    this.getCPData();
    this.$pageStatus.loading();
  },
  methods: {
    // 获取组合数据
    async getCPData() {
      const query = {};
      // 1：备选 2：买入 3：持仓 4：卖出 5：止盈 6：止损 7：买入失败 8：待买入 9：取消买入 10：增仓 11：减仓
      query.status = '2,3,4,5,6,8,10,11';
      query.gpcId = this.$route.query.gpc_id;
      try {
        const res = await SELECT_STOCKS(query);
        if (res && res.code == 0) {
          if (!window.getAppVersion()) return;
          let results = [];
          const stockIdArr = [];
          const marketIdArr = [];
          results = res.data;
          const that = this;
          results.forEach(item => {
            stockIdArr.push(item.stock_code);
            marketIdArr.push(item.market);
            this.detailTableData.push(apiDataDeal(item));
          });
          //客户端协议实时获取：现价，涨跌幅
          webHQCommon(stockIdArr, marketIdArr, this.detailTableData, list => {
            this.detailTableData = list;
          });
          // 默认买入价格排序
          this.detailTableData.sort(compare('buyDateSort')).reverse();
          return;
        }
      } catch (error) {
        _t.errorReport({name:`History.vue组件中方法getCPData错误。${error.name}`,message:`接口url：${_Global.api.pickStocks}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
      this.$pageStatus.fail(() => {
        this.$toast('刷新成功');
        this.getCPData();
      });
    },
    // 根据子组件中传来的值，对所有数据排序
    watchHeadSort(arg1) {
      if (arg1.sortKey === 'stockCode' || arg1.sortKey === 'status') return; //股票名称/状态不排序
      if (arg1.sortKey === 'buyDate') {
        if (arg1.currentSortTag === 1) {
          this.detailTableData.sort(compare('buyDateSort'));
        } else if (arg1.currentSortTag === 2) {
          this.detailTableData.sort(compare('buyDateSort')).reverse();
        }
        return;
      }
      if (arg1.sortKey === 'sellDate') {
        if (arg1.currentSortTag === 1) {
          this.detailTableData.sort(compare('buySellDate'));
        } else if (arg1.currentSortTag === 2) {
          this.detailTableData.sort(compare('buySellDate')).reverse();
        }
        return;
      }
      if (arg1.currentSortTag === 1) {
        this.detailTableData.sort(compare(arg1.sortKey));
      } else if (arg1.currentSortTag === 2) {
        this.detailTableData.sort(compare(arg1.sortKey)).reverse();
      }
    },
    //获取点击table的row 跳k线详情页
    watchClickRow(row) {
      jumpTokline(row.stockCode, row.market);
    },
  },
};
</script>
<style lang="less" scoped>
.cp_chi_cang {
  width: 100%;
  height: auto;
  background-color: #ffffff;
}
.history_table_wrapper {
  padding: 0 0.32rem;
}
[theme-mode='black'] .cp_chi_cang {
  width: 100%;
  height: auto;
  background-color: #121212;
}
</style>
